<template>
  <a-card size="small">
    <div slot="title">
      <span>
        <a-select v-model="searchType" style="width: 200px" @change="handleChange">
          <a-select-option value="productName">按名称搜索</a-select-option>
          <a-select-option value="productDesc">按描述搜索</a-select-option>
        </a-select>
        <a-input-search
          placeholder="请输入内容"
          enter-button
          v-model="searchName"
          @search="onSearch"
          :style="{width:'200px', marginLeft: '20px'}"
        />
      </span>
      <a-button
        type="primary"
        @click="addNewProduct"
        v-permission="{action:'add', effect:'disabled'}"
        :style="{float: 'right'}"
      >
        <a-icon type="plus" />添加商品
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="productsData"
      bordered
      rowKey="_id"
      size="small"
      :pagination="false"
    >
      <span slot="productImg" slot-scope="productImgLink">
        <img
          :src="item"
          alt
          v-for="(item,index) in productImgLink"
          :key="index"
          :style="{width:'50px',height:'50px'}"
        />
      </span>
      <span slot="producrStatusTag" slot-scope="statusTags">
        <a-tag :color="statusTags == '1' ? 'cyan' : 'orange'">{{ statusTags == '1' ? '在售' : '已下架'}}</a-tag>
      </span>
      <span slot="productPriceStatus" slot-scope="priceStatus">
        <a-tag color="green">{{ priceStatus}}￥</a-tag>
      </span>
      <span slot="action" slot-scope="productInfo">
        <a-button
          :type="productInfo.status == '2' ? 'primary' : 'danger'"
          @click="handleStatus(productInfo)"
          size="small"
        >{{ productInfo.status == '2' ? '上架' : '下架'}}</a-button>
        <a-divider type="vertical" />
        <a-button
          type="primary"
          @click="viewProductDetail(productInfo)"
          size="small"
          v-permission="{action:'view', effect:'disabled'}"
        >详情</a-button>
        <a-divider type="vertical" />
        <a-button
          type="primary"
          @click="updateProductInfo(productInfo)"
          size="small"
          v-permission="{action:'edit', effect:'disabled'}"
        >修改</a-button>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定删除？"
          ok-text="是"
          cancel-text="否"
          @confirm="sureDelete(productInfo)"
          @cancel="cancelDelete"
        >
          <a-button
            type="danger"
            v-permission="{action:'delete', effect:'disabled'}"
            size="small"
          >删除</a-button>
        </a-popconfirm>
      </span>
    </a-table>
    <div class="pagination">
      <a-pagination
        size="small"
        :total="this.total"
        show-size-changer
        show-quick-jumper
        :defaultPageSize="this.pageSize"
        :pageSizeOptions="['2','5','10','15']"
        :show-total="total => `共${this.total}条`"
        @change="currentSizeData"
        @showSizeChange="changeSize"
      />
    </div>
    <AddNewProduct ref="addProductModal" @refreshTable="refreshTable" />
    <UpdateProduct
      ref="updateProductModal"
      @refreshupdateTable="refreshupdateTable"
      :curClickProductInfo="curClickProductInfo"
    />
    <ViewProductDetail ref="viewProductDarwer" :curClickProductInfo="curClickProductInfo" />
  </a-card>
</template>

<script>
import {
  getAllProducts,
  deleteProduct,
  searchProduct,
  updateProductStatus
} from '@/network/product.js'
import { formateDate } from '@/utils/dateUtils.js'
import AddNewProduct from './AddNewProduct'
import UpdateProduct from './UpdateProduct'
import ViewProductDetail from './ViewProductDetail'

const columns = [
  {
    title: '商品名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '商品图片',
    dataIndex: 'imgs',
    align: 'center',
    scopedSlots: { customRender: 'productImg' },
  },
  {
    title: '商品描述',
    dataIndex: 'desc',
    align: 'center',
  },
  {
    title: '商品价格',
    dataIndex: 'price',
    align: 'center',
    scopedSlots: { customRender: 'productPriceStatus' },
  },
  {
    title: '商品状态',
    dataIndex: 'status',
    align: 'center',
    scopedSlots: { customRender: 'producrStatusTag' },
  },

  {
    title: '操作',
    align: 'center',
    width: '300px',
    scopedSlots: { customRender: 'action' }
  },
];

export default {
  name: 'roleManager',
  data () {
    return {
      productsData: [],
      columns,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      searchName: '', //保存搜索关键字
      searchType: 'productName',  //保存搜索类型
      status: '', //控制商品上下架的按钮的显示 
      curClickProductInfo: {}  //保存当前点击商品的信息
    };
  },
  components: {
    AddNewProduct,
    UpdateProduct,
    ViewProductDetail
  },
  computed: {

  },
  mounted () {
    this.getAllProductList(this.pageNum, this.pageSize)
  },
  methods: {
    //select下拉框处理
    handleChange (value) {
      this.searchType = value
    },
    //根据条件搜索商品
    onSearch () {
      searchProduct(this.pageNum, this.pageSize, this.searchName, this.searchType).then(res => {
        console.log(res)
        if (res.data.status === 0) {
          this.$message.success('搜索成功')
          this.total = res.data.data.total
          this.productsData = res.data.data.list
        }
      })
    },
    //处理商品状态，上架/下架
    handleStatus (productInfo) {
      console.log(productInfo)
      const productId = productInfo._id
      if (productInfo.status == 1) {
        this.status = 2
      } else if (productInfo.status == 2) {
        this.status = 1
      }
      const params = {
        productId: productId,
        status: this.status
      }
      console.log(params)
      updateProductStatus(params).then(res => {
        if (res.data.status === 200) {
          const statusDesc = res.data.data.status === 1 ? '上架成功' : '下架成功'
          this.$message.success(statusDesc)
          this.getAllProductList(this.pageNum, this.pageSize)
        }
      })

    },
    //查看商品详情
    viewProductDetail (productInfo) {
      this.curClickProductInfo = productInfo
      this.$refs.viewProductDarwer.showDrawer()
    },
    //获取所有商品列表
    async getAllProductList (pageNum, pageSize) {
      const productsInfo = await getAllProducts(pageNum, pageSize)
      console.log(productsInfo)
      if (productsInfo.status == 200) {
        this.total = productsInfo.data.data.total
        this.productsData = productsInfo.data.data.list
      }
    },
    //删除一个商品
    sureDelete (productInfo) {
      console.log(productInfo)
      deleteProduct(productInfo._id).then(res => {
        if (res.data.status === 200) {
          this.$message.success(res.data.msg)
          //删除商品之后重新获取所有商品
          this.getAllProductList(this.pageNum, this.pageSize)
        }
      })
    },
    //取消删除
    cancelDelete () {
      this.$message.success('取消删除成功')
    },
    //点击页码重新发起请求
    currentSizeData (currentPage, pageSize) {
      this.pageNum = currentPage
      this.getAllProductList(this.pageNum, this.pageSize)
    },
    //改变页码时，重新获取数据
    changeSize (current, size) {
      this.pageSize = size
      this.getAllProductList(current, this.pageSize)
    },
    //显示添加角色的addRoleModal
    addNewProduct () {
      this.$refs.addProductModal.show()
    },
    //更新完页面之后，关闭addProductModal，刷新table
    refreshTable () {
      this.getAllProductList(this.pageNum, this.pageSize)
    },
    //显示设置角色权限的modal
    setRoleAuth (curRoleInfo) {
      console.log(curRoleInfo)
      this.curRoleId = curRoleInfo._id
      this.curRoleName = curRoleInfo.name
      this.curRoleMenuAuth = curRoleInfo.menus
      this.curRoleBtnAuth = curRoleInfo.rights
      this.$refs.setRoleModal.show()
    },
    //更新完页面之后，关闭addRoleModal，刷新table
    refreshupdateTable () {
      this.getAllProductList(this.pageNum, this.pageSize)
    },
    //打开更新商品的modal
    updateProductInfo (productInfo) {
      console.log(productInfo)
      this.curClickProductInfo = productInfo
      this.$refs.updateProductModal.show()
    }
  },

};
</script>

<style scoped>
/* 分页位置 */
.pagination {
  margin-top: 15px;
  float: right;
}
</style>
